{% if topics %}
  <ul class="list-unstyled">
    {% for topic in topics %}
      <li class="media">
        <div class="media-left">
          <a href="{% route 'users.show' topic.User.ID %}">
            <img class="media-object img-thumbnail mr-3" style="width: 52px; height: 52px;" src="{{ topic.User.Avatar }}" title="{{ topic.User.Name }}">
          </a>
        </div>

        <div class="media-body">

          <div class="media-heading mt-0 mb-1">
            <a href="{{ topic.Link }}" title="{{ topic.Title }}">
              {{ topic.Title }}
            </a>
            <a class="float-right" href="{{ topic.Link }}">
              <span class="badge badge-secondary badge-pill"> {{ topic.ReplyCount }} </span>
            </a>
          </div>

          <small class="media-body meta text-secondary">

            <a class="text-secondary" href="{% route 'categories.show' topic.Category.ID %}" title="{{ topic.Category.Name }}">
              <i class="far fa-folder"></i>
              {{ topic.Category.Name }}
            </a>

            <span> • </span>
            <a class="text-secondary" href="{% route 'users.show' topic.User.ID %}" title="{{ topic.User.Name }}">
              <i class="far fa-user"></i>
              {{ topic.User.Name }}
            </a>
            <span> • </span>
            <i class="far fa-clock"></i>
            <span class="timeago" title="最后活跃于：{{ topic.UpdatedAt }}">{{ topic.UpdatedAt }}</span>
          </small>

        </div>
      </li>
      <hr>
    {% endfor %}
  </ul>
{% else %}
  <div class="empty-block">{% if error %}{{ error }}{% else %}暂无数据 ~_~ {% endif %}</div>
{% endif %}
